<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- public quote -->
<%@include file="/jsp/comm_css_include.jsp"%>
<link rel="stylesheet" type="text/css" href="${basePath}/js/bxslider/jquery.bxslider.css" />
<!doctype html>
<html>
<head>
<style type="text/css">
	.imgSet{
	max-width: 800px;
	max-height: 600px;
	overflow: hidden;
	margin: 0 auto;
	}
</style>
</head>
<body style="background: #000;">
	  <div class="slider" id="myCarousel">
      </div>
	<!-- public quote -->
    <%@include file="/jsp/comm_js_include.jsp"%>
	<%@include file="/web/system/yw/fujian_js_include.jsp"%>
    <script src="${basePath}/js/bxslider/jquery.bxslider.js"></script>
    <script src="${basePath}/js/bxslider/jquery.fitvids.js"></script>
    <script src="${basePath}/js/jquery.rotate.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
      	var img_big_urls = parent.img_big_urls;
      	if(img_big_urls && img_big_urls.length > 0) {
      		var html = '';
      		for(var i in img_big_urls) {
      			html += '<div class="slide">';
      			html += '<span class="imglabel">' + img_big_urls[i].label + '&nbsp;&nbsp;&nbsp;';
      			html += '<a class="fa fa-mail-reply handStyle" onclick="rotateImgle(this);" title="向左旋转90°">左转90°</a>&nbsp;&nbsp;&nbsp;';
      			html += '<a class="fa fa-mail-forward handStyle" onclick="rotateImgri(this);" title="向右旋转90°">右转90°</a>&nbsp;&nbsp;&nbsp;';
      			html += '<i class="fa fa-search-plus handStyle" title="查看大图" onclick="setBigimgs(this);">查看原图</i></span>';
      			html += '<div class="imgSet"><img class="maxheight" src="' + img_big_urls[i].src + '"/></div>';
      			html += '</div>';
      		}
      		$('#myCarousel').html(html);
      	} else {
      		$('#myCarousel').html('');
      	}
      	
        $('#myCarousel').bxSlider({
			mode: 'fade',
          	slideMargin: 10,
          	video:true,
          	height:'92%',
          	pager:true,
          	startSlide:parent.index
        });
        
    });
    
    
    function setBigimgs(obj){
    	//var imglabel = $(obj).parents("span.imglabel").text();
    	var imgsrc = $(obj).parents("span.imglabel").siblings(".imgSet").find("img").attr("src");
    	var content ='<div class="imgFactsize"><img src="' + imgsrc + '" /></div>';
    	layer.open({
    	  	//title:imglabel,
    	  	title:false,
    	  	type: 1,
    	  	area: ['85%', '93%'], //宽高
    	  	content:content
    	});
    }
    
	var current = 0;
    var rotateImgle = function(obj){
    	current++; 
        $(obj).parents("span.imglabel").siblings(".imgSet").find("img").rotate(-90*current);
    }; 
    
    var rotateImgri = function(obj){
   		current++; 
        $(obj).parents("span.imglabel").siblings(".imgSet").find("img").rotate(90*current);
   }; 
    </script>
</body>
</html>